<template>
    <div class="container">
      <div class="left">
        <dv-border-box-13 :color="['#00ff00']">
          <div>
            <span @click="navigateTo('precipitation')">
              <dv-border-box-12 v-if="isActiveRoute('precipitation')" :color="['#00ff00']">降水</dv-border-box-12>
              <span v-else>降水</span>
            </span>
            <span @click="navigateTo('temperature')">
              <dv-border-box-12 v-if="isActiveRoute('temperature')" :color="['#00ff00']">气温</dv-border-box-12>
              <span v-else>气温</span>
            </span>
            <span @click="navigateTo('humidity')">
              <dv-border-box-12 v-if="isActiveRoute('humidity')" :color="['#00ff00']">相对湿度</dv-border-box-12>
              <span v-else>相对湿度</span>
            </span>
            <span @click="navigateTo('wind')">
              <dv-border-box-12 v-if="isActiveRoute('wind')" :color="['#00ff00']">风向风速</dv-border-box-12>
              <span v-else>风向风速</span>
            </span>
            <span @click="navigateTo('negative-ions')">
              <dv-border-box-12 v-if="isActiveRoute('negative-ions')" :color="['#00ff00']">负氧离子</dv-border-box-12>
              <span v-else>负氧离子</span>
            </span>
            <span @click="navigateTo('radar')">
              <dv-border-box-12 v-if="isActiveRoute('radar')" :color="['#00ff00']">雷达回波</dv-border-box-12>
              <span v-else>雷达回波</span>
            </span>
            <span @click="navigateTo('scenery')">
              <dv-border-box-12 v-if="isActiveRoute('scenery')" :color="['#00ff00']">景区实景</dv-border-box-12>
              <span v-else>景区实景</span>
            </span>
          </div>
        </dv-border-box-13>
      </div>
      <div class="right">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'monitor',
    methods: {
      navigateTo(route) {
        this.$router.push({ path: route });
      },
      isActiveRoute(route) {
        return this.$route.path.includes(route);
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  
    .left {
      width: 15%;
      height: 95%;
  
      div {
        width: 100%;
        height: 98%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
  
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 95%;
          height: 10%;
          color: white;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.3s ease;
        }
  
        span:hover {
          background-color: rgba(8, 121, 68, 0.779);
          transform: scale(1.05);
        }
      }
    }
  
    .right {
      width: 80%;
      height: 95%;
    }
  }
  
 
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
  </style>
  